<template>
  <div class="home">
    <el-row :gutter="20" class="btn_group">
      <el-col :span="2"
        ><el-button type="success" plain>岭南水果</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>药用植物</el-button></el-col
      >
      <el-col :span="2"
        ><el-button type="success" plain>经济作物</el-button></el-col
      >
    </el-row>

    <el-container class="container2">
      <el-aside width="20%">
        <div class="search">
          <el-input
            v-model="input3"
            class="input"
            placeholder="请输入您要查询的植物所在的属"
          />
          <el-button type="primary" plain size="small">搜索</el-button>
        </div>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          class="tree"
        ></el-tree>
      </el-aside>
      <el-main>
        <div id="mapContainer"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import createInfoWindow from "../utils.js/amap";
export default {
  name: "Home",
  components: {},
  data () {
    return {
      input3: "",
      data: [
        {
          label: "无患子科",
          children: [
            {
              label: "荔枝属",
            },
            {
              label: "龙眼属",
            },
          ],
        },
        {
          label: "漆树科",
          children: [
            {
              label: "杧果属",
            },
          ],
        },
        {
          label: "禾本科",
          children: [
            {
              label: "甘蔗属",
            },
          ],
        },
        {
          label: "酢浆草科",
          children: [
            {
              label: "阳桃属",
            },
          ],
        },
        /** 
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },*/
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      select: "",

      pointList: [
        {
          title: "address1",
          local: [113.050818, 24.912506],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "这是啥地方"
        },
        {
          title: "address2",
          local: [113.885224, 23.640932],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "这是个风景优美的地方吗"
        },
        {
          title: "address3",
          local: [117.651005, 26.339452],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "阿瑟文学阿瑟文学阿瑟文学阿瑟文学"
        },
        {
          title: "地点4",
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          local: [120.166667, 30.266667],
          note: "你是我的神"
        },
      ],
      map: null,

    };
  },
  watch: {

  },
  mounted () {
    this.initMap();
  },
  created () {


  },

  methods: {
    // go (path) {
    //   this.$router.push(path);
    // },
    goToAbout () {
      this.$router.push('/about');

      // this.$router.push({
      //   path: "/about",
      //   query: {
      //     name: this.select,
      //   },
      // });
    },
    goto () {
      this.$router.push('/search');
    },
    initMap () {
      let self = this;
      this.map = new window.AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [113.050818, 24.912506],
        zoom: 14,//级别
        mapStyle: "amap://styles/fresh",
      });//初始化地图
      //遍历生成多个标记点
      for (var i = 0; i < this.pointList.length; i++) {
        const marker = new window.AMap.Marker({
          position: this.pointList[i].local, //不同标记点的经纬度
          map: self.map,
          icon: '',
        });

        marker.title = `<span>植物点</span>`;
        marker.content = JSON.stringify([
          "address：" + this.pointList[i].title,
          "family：" + this.pointList[i].family,
          "genus：" + this.pointList[i].genus,
          "genericName：" + this.pointList[i].genericName,
          "specificEpithet：" + this.pointList[i].specificEpithet

          // "备注：" + this.pointList[i].note,
        ]);
        marker.on("click", self.markerClick);
        // marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
      //实例化信息窗体
      this.infoWindow = new window.AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: self.winInfo,
        offset: new window.AMap.Pixel(15, -35),
      });
      this.map.setFitView();
    },
    // 点标记点击事件
    markerClick (e) {
      let self = this;
      this.winInfo = JSON.parse(e.target.content);
      this.winTitle = e.target.title;
      // 设置窗体内容
      this.infoWindow.setContent(
        createInfoWindow.createInfoWindow(
          self.winTitle,
          self.winInfo.join("<br/>"),
          function () {
            // 关闭窗体
            self.map.clearInfoWindow();
          }
        )
      );
      // 打开窗体
      self.infoWindow.open(self.map, e.target.getPosition());
    },

  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 81%;
}
.el-container {
  width: 100%;
  height: 100%;
}
img {
  // width: 100%;
  margin: 0 auto;
  height: 100%;
  display: block;
}
.container2 {
  margin-top: 20px;
}
.el-header {
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
}
.header {
  width: 100%;
  height: 100%;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
}
.el-aside {
  height: 100%;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
  margin-right: 20px;
  background-color: #fff;
}
.el-aside .search {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10%;
  background-color: #e2f7d4;
}
.el-input {
  margin: 0;
}
.input {
  width: 75%;
  margin-right: 4px;
}
.tree {
  width: 100%;
  height: 90%;
  font-weight: bold;
  color: rgb(102, 153, 52);
}
.el-main {
  height: 100%;
  box-shadow: 5px 5px 20px hsla(0, 0%, 86.7%, 0.5);
  border-radius: 3px;
  background-color: #fff;
}
#mapContainer {
  width: 100%;
  height: 100%;
}
</style>
